// 还存在有问题的代码，问题在于processFile()中 // 问题：在ipone 5c 下，某些图片压缩处理后，上传到服务器生成的文件size为0，即是空白;define(['mod/tool/formSubmit'] ,function(o_formSubmit) { return { init: function(id) { var self = this; self.sniff(id); var $img = ''; var $inputField = ''; }, sniff: function(id) { var self = this; if (window.File && window.FileReader && window.FormData) { $inputField = $('#' + id); $inputField.on('change', function (e) { var file = e.target.files[0]; if($('.c-img-wrap').length >= 9) { Hnb.ui.showError('不能上传超过9张图片' , 3000); return ; } if (file) { //alert(file.type); //if(!file.type) file.type='image/jpeg'; //if (/^image\//i.test(file.type)) { if($("#id_img_list").parent().attr("scrollWidth") > $(window).width()) { $("#id_img_list").parent().scrollLeft($("#id_img_list").parent().attr("scrollWidth") - $(window).width()); } $img = $('').insertBefore($("#id_last_img_wrap")); self.readFile(file); //} else { // Hnb.ui.showError('请在浏览器中打开该页面上传图片' , 3000); // $inputField.val(''); //} } }); $inputField.val(''); } else { Hnb.ui.showError("当前您的浏览器不支持图片上传，请选择其他的浏览器进行上传。" , 3000); $inputField.val(''); } }, readFile: function (file) { var self = this; var reader = new FileReader(); var head = ''; reader.onloadend = function () { //reader.onload = function () { head = reader.result.substr(0, 20); alert('head:' + head); alert('file_type:' + file.type); self.processFile(reader.result, file.type); } reader.onerror = function () { Hnb.ui.showError('上传图片过程中发生了网络异常，请稍后重试。' , 3000); } reader.readAsDataURL(file); }, processFile: function (dataURL, fileType) { var self = this; var maxWidth = 3120; var maxHeight = 4208; var image = new Image(); image.src = dataURL; image.onload = function () { var width = image.width; var height = image.height; var shouldResize = (width > maxWidth) || (height > maxHeight); if (!shouldResize) { //self.submitFile(dataURL); self.sendFile(dataURL , fileType); return; } var newWidth; var newHeight; if (width > height) { newHeight = height * (maxWidth / width); newWidth = maxWidth; } else { newWidth = width * (maxHeight / height); newHeight = maxHeight; } var canvas = document.createElement('canvas'); canvas.width = newWidth; canvas.height = newHeight; var context = canvas.getContext('2d'); context.drawImage(this, 0, 0, newWidth, newHeight); dataURL = canvas.toDataURL(fileType); alert(dataURL.length); //window.location = dataURL; //self.sendFile(dataURL , fileType); /* var file = canvas.mozGetAsFile("foo.png"); var f = document.createElement("form"); var i = document.createElement("input"); //input element, text i.setAttribute('type',"file"); i.setAttribute('name',"upfile"); i.setAttribute('value' , dataURL); f.appendChild(i); */ //$("#id_upfile").val(dataURL); //document.forms[0].upfile.val = dataURL; //window.location = dataURL; //var formData = new FormData(document.forms[0]); //console.log(document.forms[0]); //console.log(formData.get('upfile')); //console.log(formData); //return; //formData.append('imageData', dataURL); //formData.delete('upfile'); //console.log($inputField.files); //formData.set('upfile', $inputField.files[0] , dataURL); //self.submitFile($(f)); }; image.onerror = function () { //alert('There was an error processing your file!'); Hnb.ui.showError('上传图片处理过程中发生了网络异常，请稍后重试。' , 3000); }; }, submitFile: function(f) { var self = this; //console.log(f); o_formSubmit.create(f , Hnb.WWW_CGI_URL + "/image/saveInCrossDomain").start().done(function(json_msg){ if(json_msg.state || !json_msg.data.real_url) { Hnb.ui.showError("上传图片失败！" , 3000); $img.remove(); } else { console.log(json_msg.data); $img.removeClass("bg").addClass("comBg").css("background-image" , "url(" + json_msg.data.real_url + ")").attr("hnb-src" , json_msg.data.real_url); //$img.html('
'); $("#id_top_wrap").addClass("active"); //$img.html(""); } }).fail(function(json_error){ $img.remove(); Hnb.ui.showError("您的网络有点慢，请稍后重试" , 3000); }).always(function(){ $img.removeClass("bg"); self.isSubmitingImgNum--; }); }, sendFile: function (fileData , fileType) { var formData = new FormData(); formData.append('imageData', fileData); formData.append('imageType' , fileType); $.ajax({ type: 'POST', timeout: 300000, url: Hnb.WWW_CGI_URL + '/image/saveCndCompressImage', data: formData, contentType: false, processData: false, success: function (json_msg) { //console.log('返回json数据' + json_msg); var json_msg = $.parseJSON(json_msg); if(!json_msg.state) { // 跨域请求处理 document.domain = 'hinabian.com'; // 可以将上传到线上的图片，追加到预览图位置 // ... } else { Hnb.ui.showError('您的网络有点慢，请稍后再上传。' , 3000); } }, error: function (json_msg) { Hnb.ui.showError('上传图片发生了网络异常，请稍后重试。' , 3000);; } }).always( function() { $inputField.val(""); $img.removeClass("bg"); } ); } }});
// 修改后，可以正常使用的代码;define(['mod/tool/formSubmit'] ,function(o_formSubmit) { return { init: function(id) { var self = this; self.sniff(id); var $img = ''; var $inputField = ''; }, sniff: function(id) { var self = this; if (window.File && window.FileReader && window.FormData) { $inputField = $('#' + id); $inputField.on('change', function (e) { var file = e.target.files[0]; if($('.c-img-wrap').length >= 9) { Hnb.ui.showError('不能上传超过9张图片' , 3000); return ; } if (file) { //if(!file.type) file.type='image/jpeg'; //if (/^image\//i.test(file.type)) { if($("#id_img_list").parent().attr("scrollWidth") > $(window).width()) { $("#id_img_list").parent().scrollLeft($("#id_img_list").parent().attr("scrollWidth") - $(window).width()); } $img = $('').insertBefore($("#id_last_img_wrap")); self.readFile(file); } }); } else { Hnb.ui.showError("当前您的浏览器不支持图片上传，请选择其他的浏览器进行上传。", 3000); //$inputField.val(''); } $inputField.val(''); }, readFile: function (file) { var self = this; var reader = new FileReader(); var head = ''; reader.onloadend = function () { //reader.onload = function () { //head = reader.result.substr(0, 20); self.processFile(reader.result, file.type); } reader.onerror = function () { Hnb.ui.showError('上传图片过程中发生了网络异常，请稍后重试。', 3000); return; } reader.readAsDataURL(file); $inputField.val(''); }, processFile: function (dataURL, fileType) { var self = this; var unitSize = 480; var image = new Image(); image.src = dataURL; image.onload = function () { var wFactor = image.width / unitSize; var hFactor = image.height / unitSize; var minFactor = Math.round(Math.min(wFactor, hFactor)); if (minFactor < 2) { //self.submitFile(dataURL); self.sendFile(dataURL, fileType); return; } var newWidth = image.width / minFactor; var newHeight = image.height / minFactor; var canvas = document.createElement('canvas'); canvas.width = newWidth; canvas.height = newHeight; var context = canvas.getContext('2d'); context.drawImage(this, 0, 0, newWidth, newHeight); dataURL = canvas.toDataURL(fileType); //window.location = dataURL; self.sendFile(dataURL, fileType); }; image.onerror = function () { Hnb.ui.showError('上传图片处理过程中发生了网络异常，请稍后重试。' , 3000); $inputField.val(''); }; }, submitFile: function(f) { var self = this; o_formSubmit.create(f , Hnb.WWW_CGI_URL + "/image/saveInCrossDomain").start().done(function(json_msg){ if(json_msg.state || !json_msg.data.real_url) { Hnb.ui.showError("上传图片失败！" , 3000); $img.remove(); } else { $img.removeClass("bg").addClass("comBg").css("background-image" , "url(" + json_msg.data.real_url + ")").attr("hnb-src" , json_msg.data.real_url); //$img.html(''); $("#id_top_wrap").addClass("active"); //$img.html(""); } }).fail(function(json_error){ $img.remove(); Hnb.ui.showError("您的网络有点慢，请稍后重试" , 3000); }).always(function(){ $img.removeClass("bg"); self.isSubmitingImgNum--; }); }, sendFile: function (fileData , fileType) { var formData = new FormData(); formData.append('imageData', fileData); formData.append('imageType' , fileType); $.ajax({ type: 'POST', timeout: 300000, url: Hnb.WWW_CGI_URL + '/image/saveCndCompressImage', data: formData, contentType: false, processData: false, success: function (json_msg) { var json_msg = $.parseJSON(json_msg); if(!json_msg.state) { document.domain = 'hinabian.com'; $img.removeClass("bg").addClass("comBg").css("background-image" , "url(" + json_msg.data.real_url + ")").attr("hnb-src" , json_msg.data.real_url); //$img.html(''); $("#id_top_wrap").addClass("active"); } else { Hnb.ui.showError('您的网络有点慢，请稍后再上传。' , 3000); } }, error: function (json_msg) { Hnb.ui.showError('上传图片发生了网络异常，请稍后重试。' , 3000);; } }).always( function() { $inputField.val(""); $img.removeClass("bg"); } ); } }});